/**
 * 系统管理 菜单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">权限管理</div>
      <el-col :span="4"> </el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <el-button size="small" type="primary" @click="setAllExpand">全部展开</el-button>
          <el-button size="small" type="primary" @click="closeAll">全部压缩</el-button>
        </div>
        <el-tree class="treeclass" ref="tree" :data="treeData" default-expand-all="" :props="defaultProps" @node-click="nodeclick" @check-change="handleClick" check-strictly node-key="id" show-checkbox></el-tree>
      </el-col>
      <el-col :span="18">
        <div class="mod-btnbox">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addModule">添加</el-button>
        </div>
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="父级菜单" prop="parentId">
            <el-select size="small" v-model="form.parentId" placeholder="请选择" class="selectw">
              <el-option  :key="0" label="一级权限" :value="0"> 一级权限</el-option>
              <el-option v-for="parm in fmenu" :key="parm.pId" :label="parm.pName" :value="parm.pId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名称" prop="pName">
            <el-input size="small" v-model="form.pName"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="pIcon">
            <el-input size="small" v-model="form.pIcon"></el-input>
          </el-form-item>
          <el-form-item label="URL" prop="pHref">
            <el-input size="small" v-model="form.pHref"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="pDesc">
            <el-input size="small" v-model="form.pDesc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="saveModule('form')">保存</el-button>
            <el-button size="small" type="primary" v-show="showdelete" @click="deleteModule">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  ModuleList,
  ModuleDeleteAdmin,
  ModuleSaveAdmin,
  ModuleGetAdmin,
  ModuleListAll,
  ModuleNodesAdmin,
  RoleRightTreeAdminAll,
  ModuleGet,
  ModuleNodes,
  ModuleSave,
  ModuleDelete
} from '../../api/userMG'
import qs from 'qs'
export default {
  data() {
    return {
      selectPid:null,
      showdelete: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      form: {
        pDesc: "",
        pHref: "",
        pIcon: "",
        pId: 0,
        pLevels: null,
        pName: "",
        pState: 0,
        parent: "",
        parentId: null
      },
      // rules表单验证
      rules: {
        parentId: [
          { required: true, message: '请选择父级菜单', trigger: 'blur' }
        ],
        pName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        pIcon: [
          { required: true, message: '请输入菜单图标', trigger: 'blur' }
        ],
        pHref: [{ required: true, message: '请输入URL', trigger: 'blur' }],
        pDesc: [
          { required: true, message: '请输入菜单顺序', trigger: 'blur' }
        ]
      },
      fmenu: [] //父级菜单
    }
  },
  /**
   * 创建完毕
   */

  created() {
    this.getdata()
    this.getmenu()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据
    getdata() {
      ModuleListAll()
        .then(res => {
          this.treeData = res.data;
        })
        .catch(err => {
          this.loading = false
          this.$message.error('菜单管理列表失败，请稍后再试！')
        })
    },
    changezhou (event) {
      this.selectPid=event.pId
    },

    //关闭所有节点
    closeAll(){
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded = false;
      }
    },


// 展开所有节点
    setAllExpand() {
      for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
        this.$refs.tree.store._getAllNodes()[i].expanded = true;
      }
    },

    // 添加
    addModule() {
      this.showdelete = false
      this.form.pDesc = ""
      this.form.pHref = ""
      this.form.pIcon =""
      this.form.pId = 0
      this.form.pLevels = null
      this.form.pName = ""
      this.form.pState= 0
      this.form.parent = ""
      this.form.parentId = null
    },
    // 获取父级菜单
    getmenu() {

      ModuleNodesAdmin()
        .then(res => {
          this.fmenu = res.data
        })
        .catch(err => {
          this.loading = false
          this.$message.error('父级菜单列表获取失败，请稍后再试！')
        })
    },
    // 复选变单选
    handleClick(data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([data])
        this.showdelete = true
      } else {
      }
    },
    // 点击节点
    nodeclick(arr, node, self) {
      this.selectPid=arr.pid
      let arr1 = {};
      arr1.id = arr.id;
      console.log(arr1)
      ModuleGetAdmin(arr1)
        .then(res => {
          console.log(JSON.stringify(res))
          this.form = res.data
          this.$refs.tree.setCheckedNodes([])
          this.$refs.tree.setCheckedNodes([arr])
        })
        .catch(err => {
          this.loading = false
          this.$message.error('获取失败，请稍后再试！')
        })
    },
    // 保存菜单
    saveModule(editData) {

      // this.form.parentId = this.selectPid

      console.log(this.form);
      if (this.form.parentId!=null){
        this.form.pLevels = 2
      }
      if (this.form.parentId==0 ){
        this.form.pLevels = 1
        this.form.parentId = 0
      }
      let arr2 = {};

      this.$refs[editData].validate(valid => {
        if (valid) {
          arr2.pId = this.form.pId
          arr2.pName = this.form.pName
          arr2.pDesc = this.form.pDesc
          arr2.pLevels = this.form.pLevels
          arr2.parentId = this.form.parentId
          arr2.parent = this.form.parent
          arr2.pIcon = this.form.pIcon
          arr2.pHref = this.form.pHref
          arr2.pState = this.form.pState
          if (arr2.pId == arr2.parentId && arr2.pId !=0){
            this.$message.error('保存异常！不能自己设置为自己的二级权限')
            return
          }
          console.log(arr2)
          ModuleSaveAdmin(arr2)
            .then(res => {
              this.getdata()
              this.getmenu()
              this.form.pDesc = ""
              this.form.pHref = ""
              this.form.pIcon =""
              this.form.pId = 0
              this.form.pLevels = null
              this.form.pName = ""
              this.form.pState= 0
              this.form.parent = ""
            })
            .catch(err => {
              this.$message.error('保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除菜单
    deleteModule() {
      if (this.form.pLevels ==1)
        this.form.parentId=0
      this.form.pState = 1
      ModuleSaveAdmin(this.form)
        .then(res => {
          this.getdata()
          this.getmenu()
          this.$message.error('删除成功！')
          this.form.pDesc = ""
          this.form.pHref = ""
          this.form.pIcon =""
          this.form.pId = 0
          this.form.pLevels = null
          this.form.pName = ""
          this.form.pState= 0
          this.form.parent = ""
        })
        .catch(err => {
          this.$message.error('删除失败，请稍后再试！')
        })
    }
  }
}
</script>

<style>
.user-search {
  margin-top: 20px !important;
}
.user-search td {
  margin-top: 20px !important;
}
.userRole {
  width: 100%;
}
.el-table__expanded-cell {
  padding: 0px !important;
  margin: 0px !important;
}
.modt-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f0f2f5;
  text-align: center;
  color: #334157;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}
.mod-btnbox {
  margin-bottom: 20px;
}
.treeclass {
  border: 1px solid #f3f3f3;
  padding-top: 20px;
  padding-bottom: 20px;
}
.selectw {
  width: 100%;
}
</style>

